<template>
	<!-- 分类 -->
	<div class="cate-section">
		<div class="cate-item" v-for="(item, index) in cateList" :key="index" @click="handleCateItem(item)">
			<img class="cate-item-img" :src="item.url" />
			<span>{{item.text}}</span>
		</div>
	</div>
</template>

<script>
	import url1 from '@/assets/banner/c3.png';
	import url2 from '@/assets/banner/c5.png';
	import url3 from '@/assets/banner/c6.png';
	import url4 from '@/assets/banner/c7.png';
	import url5 from '@/assets/banner/c8.png';
	export default {
		data() {
			return {
				cateList: [{
						url: url1,
						text: '环球美食'
					},
					{
						url: url2,
						text: '个护美妆'
					},
					{
						url: url3,
						text: '营养保健'
					},
					{
						url: url4,
						text: '家居厨卫'
					},
					{
						url: url5,
						text: '速食生鲜'
					}
				]
			}
		},
		methods: {
			handleCateItem(item) {
				this.$router.push({
          name: 'Classify'
        })
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 15px 10px;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 14px;
			// color: $font-color-dark;

			/* 原图标颜色太深,不想改图了,所以加了透明度 */
			.cate-item-img {
				width: 44px;
				height: 44px;
				margin-bottom: 7px;
				border-radius: 50%;
				opacity: .7;
				box-shadow: 2px 2px 10px rgba(250, 67, 106, 0.3);
			}
		}
	}

</style>
